

<template>
  <div class="my_discovery">
    <!-- 轮播图区域 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" width="100%" height="200px" />
      </van-swipe-item>
    </van-swipe>

    <!-- 宫格导航区域 -->
    <van-grid :border="false" :column-num="4">
      <van-grid-item v-for="item in gridData" :key="item.id">
        <van-image :src="item.imgUrl" height="40px" />
        <div class="grid_text">{{ item.text }}</div>
      </van-grid-item>
    </van-grid>

    <!-- 发现好歌单 -->
    <div class="music_list">
      <div class="text">发现好歌单</div>
      <van-button plain round type="default" size="small">
        <span>查看更多</span>
      </van-button>
    </div>
    <!-- 歌单列表 -->
    <van-row :gutter="[20, 20]">
      <van-col span="12" v-for="item in musicList" :key="item.id" @click="toMusicList(item.id)">
        <img :src="item.musicImg" alt="" width="100%" height="180px">
        <div>{{ item.auth }}</div>
      </van-col>
    </van-row>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 宫格数据
const gridData = ref([
  { id: 1, imgUrl: 'https://img.zcool.cn/community/015e1959000effa8012145506d85b7.jpg@2o.jpg', text: "每日推荐" },
  { id: 2, imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.d91efb0d1c78d11f1fc8b782dea09f11?rik=RyheeXQ1w0k%2bWA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50107%2f4999.jpg_wh860.jpg&ehk=ZRyBNLkObbrCKP3bFumDtSUJVSeFPnjHV7GbDOMH1a0%3d&risl=&pid=ImgRaw&r=0', text: "私人FM" },
  { id: 3, imgUrl: 'https://img.zcool.cn/community/01fb37574d4b9232f875a429a6fb07.jpg@2o.jpg', text: "歌单" },
  { id: 4, imgUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.ssml9gciofwwVX4yBZGN_AHaDJ?rs=1&pid=ImgDetMain', text: "排行榜" },
])

// 歌单数据
const musicList = ref([
  {id:1,musicImg:'https://pic3.zhimg.com/v2-6115b7cc3b8b7399d55a14f237d5d405_r.jpg?source=1940ef5c',auth:'买辣椒也用券'},
  {id:2,musicImg:'https://marketplace.canva.cn/EADt9LtKqxs/2/0/800w/canva-%E7%AE%80%E7%BA%A6%E5%91%A8%E6%9D%B0%E4%BC%A6%E6%96%B0%E6%AD%8Ccd%E5%B0%81%E9%9D%A2-EomDjCIx44E.jpg',auth:'周杰伦'},
  {id:3,musicImg:'https://img.zcool.cn/community/01ca1b5b518287a80121ade066a642.jpg@2o.jpg',auth:'auth3'},
  {id:4,musicImg:'https://tse2-mm.cn.bing.net/th/id/OIP-C.t2nNukmYwsxIEGia_18tYQHaHa?rs=1&pid=ImgDetMain',auth:'auth4'}
])

// 轮播图静态数据
const images = [
  'https://photo-static-api.fotomore.com/creative/vcg/veer/612/veer-131175854.jpg',
  'https://ts1.cn.mm.bing.net/th/id/R-C.d59006bb5aafa53fe7efb55b0dea95d9?rik=wJJ%2bUlT01anWjQ&riu=http%3a%2f%2fwww.idaolue.com%2fkindeditor%2fattached%2fimage%2f20170505%2f20170505115622_5882.jpg&ehk=eiX60V5AOIOS58e21TWfPi9%2fBrHNJXCpEAA6mrIpSq4%3d&risl=&pid=ImgRaw&r=0',
  'https://tse1-mm.cn.bing.net/th/id/OIP-C.oqMZHXcihuVXY5v6yho64gHaEg?rs=1&pid=ImgDetMain'
];

// 跳转歌单详情页面
const toMusicList = (id)=>{
  console.log("跳转歌单详情",id);
}
</script>
<style scoped>
.my_discovery {
  margin-top: 10px;
  padding: 0 10px;
  height: calc(100vh - 135px);
  overflow-y: scroll;
}

.grid_text {
  font-size: 15px;
}

.music_list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.music_list .text {
  color: #000;
  font-size: 18px;
  font-weight: 600;
}

.music_list span {
  color: #000;
}</style>